<template>
  <div>
    <!-- 头部 -->
    <div class="search">
      <a-form style="padding-top: 20px" :model="form" :hideRequiredMark="true" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row>
          <a-col :span="10" :lg="10" :xs="24" :md="24">
            <a-form-item label="审核状态">
              <a-row style="align-items: center">
                <a-col
                  :span="5"
                  v-for="(item, index) in statusList"
                  :offset="index == 0 ? 1 : ''"
                  :class="index == statusAct ? 'act-font-color' : ''"
                  @click="chooseStatus(item.nurseCardStatus, index)"
                  :key="item.nurseCardStatus"
                  >{{ item.title }}</a-col
                >
              </a-row>
            </a-form-item>
          </a-col>
          <a-col :span="6" :lg="6" :xs="9" :md="8">
            <a-form-item>
              <a-range-picker
                v-model:value="time"
                style="width: 100%"
                :ranges="ranges"
                show-time
                format="YYYY/MM/DD HH:mm:ss"
                @change="panelChange"
              />
            </a-form-item>
          </a-col>
          <a-col :span="4" :offset="1" :lg="4" :xs="7" :md="7">
            <a-form-item name="keyword" label="">
              <a-input v-model:value="form.keyword" placeholder="请输入搜索内容"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="2" :offset="1"><a-button type="primary" @click="search" class="d-a-center">搜索</a-button></a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 列表 -->
    <a-table :columns="columns" :data-source="list" bordered :loading="loading" :pagination="pagination" @change="handleTableChange">
      <!-- :scroll="{ y: 540,x:'auto' }" -->

      <template #nurseCardStatus="{ record }">
        <a-tag :color="orderListStatusColor(record.nurseCardStatus)">{{ orderListStatus(record.nurseCardStatus) }}</a-tag>
      </template>
      <template #operation="{ record }">
        <a-button type="link" v-has="{ a: $route, b: 1 }" @click="look(record.number, record.id)">查看</a-button>
        <a-button type="link" @click="deal(record.number, record.id)" v-if="record.nurseCardStatus == 0" v-has="{ a: $route, b: 2 }"
          >审核</a-button
        >
        <a-button
          type="link"
          @click="editPrice(record.number, record.id, record.price)"
          v-if="record.nurseCardStatus == 0"
          v-has="{ a: $route, b: 2 }"
          >编辑</a-button
        >
      </template>
    </a-table>
    <!-- 拒绝审核-->
    <a-modal :destroyOnClose="true" v-model:visible="rejectVisible" title="原因填写" @ok="handleOk1" ok-text="提交" :closable="true">
      <a-form ref="reasonRef" :model="reasonForm" :rules="rules">
        <a-form-item label="主述" name="value">
          <a-textarea v-model:value="reasonForm.value"></a-textarea>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 编辑价格 -->
    <a-modal :destroyOnClose="true" v-model:visible="editPriceVisible" title="编辑" @ok="editPriceOk" ok-text="提交" :closable="true">
      <a-form :model="editPriceForm">
        <a-form-item label="服务金额">
          <a-input v-model:value="editPriceForm.price" type="number" />
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 弹窗 -->
    <template v-if="nurseReportVisible">
      <CheckDetail :isShowClose="false" :isAudit="isEdit" :visible="nurseReportVisible" :number="number" :id="id" @closeModal="closeModal">
        <template v-slot:audit>
          <a-divider></a-divider>
          <a-row v-if="isEdit == 1">
            <a-col :span="4" :offset="8">
              <a-button type="danger" @click="reject" class="d-a-center">拒绝</a-button>
            </a-col>
            <a-col :span="4" :offset="1">
              <a-button type="primary" @click="pass" class="d-a-center">通过</a-button>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="2" :offset="12" v-if="isEdit == 0">
              <a-button type="info" @click="closeModal" class="d-a-center">关闭</a-button>
            </a-col>
          </a-row>
        </template>
      </CheckDetail>
    </template>
  </div>
</template>
<script>
import { reactive, ref, watch, computed, defineComponent, createVNode, toRefs } from 'vue'
import { CheckOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { Modal, notification, message } from 'ant-design-vue'
import { useModal } from '@/hooks'
import { useRoute, useRouter } from 'vue-router'
import CheckDetail from '../components/checkDetail.vue'
import { deleteObjBlank } from '@/assets/js/common.js'
import { selectNurseCardOrder, updateNurseCardOrderStatus, updateNurseCardOrderPrice } from '@/api/buisness/index'
export default {
  components: {
    CheckOutlined,
    EditOutlined,
    ExclamationCircleOutlined,
    CheckDetail
  },
  setup() {
    const reasonRef = ref('')
    const priceRef = ref('')
    const reasonForm = reactive({
      value: ''
    })
    const editPriceForm = reactive({
      price: ''
    })
    const form = reactive({})

    const rules = {
      value: [
        {
          required: true,
          message: '请填写原因!',
          trigger: 'blur'
        }
      ]
    }
    const rules1 = {
      value: [
        {
          required: true,
          message: '请填写服务金额!',
          trigger: 'blur'
        }
      ]
    }
    const data = reactive({
      loading: true,
      list: [],
      time: [],
      id: '', //护理报告ID
      number: '',
      statusAct: 0,
      isEdit: 0,
      nurseReportVisible: false,
      rejectVisible: false,
      visible: false,
      editPriceVisible: false
    })
    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 10,
      total: 0
    })

    // 状态列表
    const statusList = reactive([
      {
        title: '全部',
        nurseCardStatus: ''
      },
      {
        title: '待审核',
        nurseCardStatus: 0
      },
      {
        title: '已通过',
        nurseCardStatus: 1
      },
      {
        title: '未通过',
        nurseCardStatus: 2
      }
    ])
    const orderListStatusColor = computed(nurseCardStatus => {
      return function (nurseCardStatus) {
        if (nurseCardStatus == 1) {
          return 'success'
        }
        if (nurseCardStatus == 0) {
          return '#f50'
        }
        if (nurseCardStatus == 2) {
          return 'error'
        }
      }
    })
    const orderListStatus = nurseCardStatus => {
      let title = ''
      switch (nurseCardStatus) {
        case 1:
          title = '已通过'
          break
        case 0:
          title = '待审核'
          break
        case 2:
          title = '未通过'
          break
      }
      return title
    }
    // 选择时间
    const panelChange = (date, dateString) => {
      form.beginTime = dateString[0]
      form.endTime = dateString[1]
    }

    // 查询
    const search = () => {
      if (Object.keys(form).length == 0) {
        message.warning('请输入你要搜索的内容！！！')
        return
      }
      deleteObjBlank(form)
      page.current = 1
      init()
    }

    const columns = [
      {
        title: '订单号',
        dataIndex: 'number',
        className: 'table',
        align: 'center',
        ellipsis: true
      },
      {
        title: '服务对象',
        dataIndex: 'name',
        className: 'table',
        align: 'center'
      },
      {
        title: '下单对象',
        dataIndex: 'userName',
        className: 'table',
        align: 'center'
      },
      {
        title: '服务项目',
        dataIndex: 'serviceName',
        className: 'table',
        align: 'center'
      },
      {
        title: '服务地址',
        dataIndex: 'address',
        className: 'table',
        ellipsis: true,
        align: 'center'
      },
      {
        title: '申请时间',
        dataIndex: 'createdAt',
        className: 'table',
        align: 'center',
        sort: true
      },
      {
        title: '审核状态',
        dataIndex: 'nurseCardStatus',
        className: 'table',
        align: 'center',
        slots: {
          customRender: 'nurseCardStatus'
        }
      },
      {
        title: '操作',
        dataIndex: 'operation',
        className: 'table',
        align: 'center',
        fixed: 'right',
        slots: {
          customRender: 'operation'
        }
      }
    ]

    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ['10', '20', '30'],
      showTotal: (total, range) => {
        return '共' + total + '条'
      },
      total: page.total,
      showQuickJumper: true,
      showSizeChanger: true
    }))

    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      console.log(pagination, '当前分页')
      page.current = pagination.current
      page.pageSize = pagination.pageSize

      // 请求列表接口
      init()
    }
    // 关闭护理报告弹窗
    const closeModal = () => {
      data.nurseReportVisible = false
    }

    const chooseStatus = (status, index) => {
      if (data.statusAct == index) return
      data.statusAct = index
      form.status = status
      if (index == 0) {
        delete form['status']
      } else {
        form.status = status
      }
      page.current = 1
      init()
    }
    const handleOk = e => {
      data.visible = false
    }
    const handleOk1 = e => {
      reasonRef.value
        .validate()
        .then(async () => {
          let res = await updateNurseCardOrderStatus(data.number, 2, reasonForm.value)
          if (res.success) {
            data.nurseReportVisible = false
            data.rejectVisible = false
            notification.success({
              message: '执行成功',
              duration: 1
            })
            init()
          }
        })
        .catch(error => {})
    }
    const editPriceOk = async () => {
      if (editPriceForm.price <= 0) {
        message.error('请输入大于0的金额')
        return
      }
      console.log(data.number)
      let res = await updateNurseCardOrderPrice(data.number, editPriceForm.price)
      if (res.success) {
        message.success('修改成功')
        init()
        data.editPriceVisible = false
      }
    }
    // 拒绝审核
    const reject = () => {
      data.rejectVisible = true
      console.log(reasonForm.value)
      reasonForm.value = ''
    }
    const pass = () => {
      const { closeModal } = useModal.confirm({
        title: '确认通过此护理资料吗？',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        cancelText: '取消',
        onOk: async () => {
          let res = await updateNurseCardOrderStatus(data.number, 1)
          if (res.success) {
            notification.success({
              message: '执行成功',
              duration: 1
            })
            data.nurseReportVisible = false
            init()
            closeModal()
          }
        }
      })
    }
    // 查看
    const look = (number, id) => {
      data.isEdit = 0
      data.number = number
      data.id = id
      data.nurseReportVisible = true
    }

    // 审核
    const deal = (number, id) => {
      data.isEdit = 1
      data.number = number
      data.id = id
      data.nurseReportVisible = true
    }
    const editPrice = (number, id, price) => {
      data.number = number
      data.editPriceVisible = true
      editPriceForm.price = price
    }
    init()
    async function init() {
      let flag = form.nurseCardStatus == 0 ? true : false
      data.loading = true
      // console.log(form, "表单内容是---");
      let obj = {
        pageNum: page.current,
        pageSize: page.pageSize,
        ...form
      }
      let res = await selectNurseCardOrder(obj)
      if (res.success) {
        res.object.list.map(el => (el.key = el.number))
        data.list = res.object.list
        page.total = res.object.total
        data.loading = false
      }
    }
    return {
      ...toRefs(data),
      form,
      rules,
      rules1,
      columns,
      pagination,
      statusList,
      handleTableChange,
      search,
      deal,
      look,
      panelChange,
      chooseStatus,
      editPriceForm,
      editPrice,
      labelCol: {
        style: {
          fontWeight: 'bolder'
        }
      },
      closeModal,
      handleOk,
      editPriceOk,
      reasonRef,
      priceRef,
      reasonForm,
      reject,
      pass,
      handleOk1,
      orderListStatus,
      orderListStatusColor
    }
  }
}
</script>
<style scoped lang="less">
.search {
  background-color: #e6e6e6;
  padding-left: 20px;
  margin-bottom: 20px;
}
</style>
